

<template>
  <div class="redis-manager">
    <!-- 头部区域重新设计 -->
    <div class="header">
      <div class="logo">
        <i class="el-icon-connection"></i>
        <span>Redis 数据管理</span>
      </div>
      <div class="search-box">
        <el-input
            v-model="searchKey"
            placeholder="搜索键..."
            clearable
            @clear="refreshKeys"
            class="search-input">
          <template #prefix>
            <i class="el-icon-search"></i>
          </template>
        </el-input>
        <el-button
            type="primary"
            icon="el-icon-refresh"
            circle
            @click="refreshKeys"
            class="refresh-btn"></el-button>
      </div>
    </div>

    <div class="main-content">
      <!-- 左侧键列表 - 卡片式设计 -->
      <div class="key-list">
        <el-card shadow="never" class="list-card">
          <div slot="header" class="card-header">
            <span class="title">键列表</span>
            <div class="actions">
              <el-tooltip content="刷新" placement="top">
                <el-button
                    type="text"
                    icon="el-icon-refresh"
                    @click="refreshKeys"></el-button>
              </el-tooltip>
            </div>
          </div>
          <el-table
              :data="keyList"
              style="width: 100%"
              @row-click="handleRowClick"
              highlight-current-row
              class="key-table"
              :row-class-name="tableRowClassName"
              :show-header="false">
            <el-table-column prop="key" min-width="180">
              <template #default="{row}">
                <div class="key-cell">
                  <i class="el-icon-document" :style="{color: getKeyColor(row.type)}"></i>
                  <span class="key-text">{{ row.keyName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="ttl" width="120" align="right">
              <template #default="{row}">
                <el-tag
                    :type="getTTLTagType(row.ttl)"
                    size="small"
                    effect="plain">
                  {{ formatTTL(row.ttl) }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>

      <!-- 右侧键值详情 - 现代化设计 -->
      <div class="key-detail">
        <el-card shadow="never" class="detail-card">
          <div slot="header" class="card-header">
            <span class="title">键值详情</span>
            <div class="actions" v-if="currentKey">
              <el-button-group>
                <el-tooltip content="编辑" placement="top">
                  <el-button
                      size="mini"
                      icon="el-icon-edit"
                      @click="editValue"></el-button>
                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                  <el-button
                      size="mini"
                      icon="el-icon-delete"
                      @click="deleteKey"></el-button>
                </el-tooltip>
                <el-tooltip content="复制" placement="top">
                  <el-button
                      size="mini"
                      icon="el-icon-document-copy"
                      @click="copyKey"></el-button>
                </el-tooltip>
              </el-button-group>
            </div>
          </div>
          <div v-if="currentKey" class="detail-content">
            <div class="key-info">
              <el-tag
                  :type="getTypeTagType(currentKey.type)"
                  effect="dark"
                  size="small">
                {{ currentKey.type }}
              </el-tag>
              <span class="key-name">{{ currentKey.name }}</span>
              <span class="ttl">
                <i class="el-icon-time"></i>
                {{ currentKey.ttl === -1 ? '永不过期' : currentKey.ttl + '秒' }}
              </span>
            </div>
            <div class="value-display">
              <el-input
                  v-if="editing"
                  v-model="editingValue"
                  type="textarea"
                  :autosize="{ minRows: 10, maxRows: 20 }"
                  placeholder="输入值"
                  class="value-input">
              </el-input>
              <pre v-else class="value-preview">{{ formattedValue }}</pre>
            </div>
            <div v-if="editing" class="edit-actions">
              <el-button type="primary" @click="saveValue" size="small">保存</el-button>
              <el-button @click="cancelEdit" size="small">取消</el-button>
            </div>
            <div v-else>
              {{currentKey.value}}sdsd
            </div>
          </div>
          <div v-else class="empty-tip">
            <el-empty description="请从左侧选择键" :image-size="120"></el-empty>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { getPage, getKey } from '@/api/redis'

export default {
  data() {
    return {
      searchKey: '',
      keyList: [],
      currentKey: null,
      currentValue: null,
      editing: false,
      editingValue: '',
      keyInfo: null

    }
  },
  methods: {
    getList() {
      getPage().then(res => {
        console.log("ssdsdl", res.data);
        this.keyList = res.data.map(item => ({
          keyName: item.keyName,
          ttl: item.ttl || -1,
          type: item.dataType || 'string'
        }))
      })
    },

    getKey(key) {
      getKey(key).then(res=>{
        this.keyInfo = res.data;
        console.log("档期那", this.keyInfo)
      })
    },
    formatTTL(ttl) {
      if (ttl === -1) return '∞'
      if (ttl < 60) return `${ttl}s`
      if (ttl < 3600) return `${Math.floor(ttl/60)}m`
      if (ttl < 86400) return `${Math.floor(ttl/3600)}h`
      return `${Math.floor(ttl/86400)}d`
    },
    getTTLTagType(ttl) {
      if (ttl === -1) return 'info'
      if (ttl < 60) return 'danger'
      if (ttl < 3600) return 'warning'
      return 'success'
    },
    getTypeTagType(type) {
      const map = {
        string: '',
        hash: 'success',
        list: 'warning',
        set: 'danger',
        zset: 'primary'
      }
      return map[type] || ''
    },
    getKeyColor(type) {
      const colors = {
        string: '#409EFF',
        hash: '#67C23A',
        list: '#E6A23C',
        set: '#F56C6C',
        zset: '#909399'
      }
      return colors[type] || '#909399'
    },
    tableRowClassName({row}) {
      return row.ttl === -1 ? '' : 'expirable-row'
    },
    handleRowClick(row) {
      console.log("sdsds", row)
      this.getKey(row.keyName);
      this.currentKey = {
        name: this.keyInfo.keyName,
        path: row.key,
        type: this.keyInfo.dataType,
        ttl: this.keyInfo.ttl,
      }
      this.currentValue = this.keyInfo.value
      // 这里应该调用API获取键值详情
      // this.fetchKeyValue(row.key)
    },
    refreshKeys() {
      this.getList()
    },
    searchKeys() {
      this.getList()
    },
    editValue() {
      this.editingValue = JSON.stringify(this.currentValue, null, 2)
      this.editing = true
    },
    saveValue() {
      // 保存逻辑
      this.editing = false
    },
    cancelEdit() {
      this.editing = false
    },
    deleteKey() {
      this.$confirm('确定要删除这个键吗?', '提示', {
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
        this.refreshKeys()
        this.currentKey = null
        this.currentValue = null
      }).catch(() => {})
    },
    copyKey() {
      // 复制逻辑
      this.$message.success('已复制到剪贴板')
    }
  },
  computed: {
    formattedValue() {
      if (!this.currentValue) return ''
      if (typeof this.currentValue === 'object') {
        return JSON.stringify(this.currentValue, null, 2)
      }
      return this.currentValue
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.redis-manager {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;

  .header {
    padding: 0 20px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

    .logo {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-weight: 500;
      color: #333;

      i {
        font-size: 24px;
        margin-right: 10px;
        color: #409EFF;
      }
    }

    .search-box {
      display: flex;
      align-items: center;

      .search-input {
        width: 300px;
        margin-right: 10px;

        ::v-deep .el-input__inner {
          border-radius: 20px;
          padding-left: 35px;
        }

        ::v-deep .el-input__prefix {
          left: 10px;
          display: flex;
          align-items: center;
        }
      }

      .refresh-btn {
        font-size: 16px;
      }
    }
  }

  .main-content {
    flex: 1;
    display: flex;
    overflow: auto;
    padding: 15px;
    gap: 15px;

    .key-list {
      width: 520px;
      height: 100%;
      overflow: auto;
      .list-card {
        height: 100%;
        border-radius: 8px;
        border: none;
        overflow: auto;
        .card-header {

          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 15px;
          border-bottom: 1px solid #ebeef5;

          .title {
            font-size: 16px;
            font-weight: 500;
            color: #303133;
          }

          .actions {
            .el-button {
              padding: 0;
              margin-left: 10px;
            }
          }
        }

        .key-table {

          ::v-deep .el-table__row {
            cursor: pointer;

            &.expirable-row {
              td {
                background-color: rgba(254, 240, 240, 0.5);
              }
            }

            &:hover {
              td {
                background-color: #f5f7fa;
              }
            }
          }

          .key-cell {
            display: flex;
            align-items: center;

            i {
              margin-right: 8px;
              font-size: 16px;
            }

            .key-text {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }
      }
    }

    .key-detail {
      flex: 1;
      height: 100%;

      .detail-card {
        height: 100%;
        border-radius: 8px;
        border: none;

        .card-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 15px;
          border-bottom: 1px solid #ebeef5;

          .title {
            font-size: 16px;
            font-weight: 500;
            color: #303133;
          }
        }

        .detail-content {
          height: calc(100% - 60px);
          display: flex;
          flex-direction: column;

          .key-info {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px 15px;
            background-color: #f5f7fa;
            border-radius: 4px;

            .el-tag {
              margin-right: 10px;
            }

            .key-name {
              font-weight: 500;
              color: #303133;
              margin-right: 15px;
            }

            .ttl {
              font-size: 12px;
              color: #909399;
              display: flex;
              align-items: center;

              i {
                margin-right: 5px;
              }
            }
          }

          .value-display {
            flex: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;

            .value-input {
              flex: 1;

              ::v-deep .el-textarea__inner {
                font-family: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
                line-height: 1.5;
                color: #333;
              }
            }

            .value-preview {
              flex: 1;
              margin: 0;
              padding: 10px;
              overflow: auto;
              background-color: #fafafa;
              border: 1px solid #ebeef5;
              border-radius: 4px;
              font-family: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace;
              line-height: 1.5;
              color: #333;
              white-space: pre-wrap;
              word-break: break-all;
            }
          }

          .edit-actions {
            margin-top: 15px;
            text-align: right;
          }
        }

        .empty-tip {
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}
</style>
